<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="60%">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="code_image">
						<template #label>
							营业执照<br />
							（仅支持单张）<br />
						</template>
						<image-upload-cOS
							v-model="form.code_image"
							idSupplierCode
							v-model:code_file="form.code_file"
							path="supplier/codeImage"
							ref="imageUploadCodeImgRef"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="front_image">
						<template #label>
							法人身份证正面照<br />
							（人像图片上传）<br />
						</template>
						<image-upload-cOS
							v-model="form.front_image"
							idSupplierFront
							v-model:front_file="form.front_file"
							path="supplier/frontImage"
							ref="imageUploadFrontImgRef"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="12">
					<el-form-item prop="back_image">
						<template #label>
							法人身份证反面照<br />
							（国徽图片上传）<br />
						</template>
						<image-upload-cOS
							v-model="form.back_image"
							idSupplierBack
							v-model:back_file="form.back_file"
							path="supplier/backImage"
							ref="imageUploadBackImgRef"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs, nextTick } from 'vue';
import { supplierMchidUploadImg, supplierMchidSeleteImg } from '/@/api/admin';
import { ElMessage } from 'element-plus';
export default {
	name: 'uploadPicDialog',
	setup() {
		const state = reactive({
			title: '上传照片',
			open: false,
			form: {} as any,
			submitLoading: false,
			rules: {
				front_image: [{ required: true, message: '法人身份证正面照不能为空', trigger: ['blur', 'change'] }],
				back_image: [{ required: true, message: '法人身份证反面照不能为空', trigger: ['blur', 'change'] }],
			}, // 表单校验
		});

		let callback: Function = () => {};
		const formRef = ref(null);
		const imageUploadCodeImgRef = ref(null);
		const imageUploadFrontImgRef = ref(null);
		const imageUploadBackImgRef = ref(null);

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate(async (valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					let params = {
						...state.form,
						code_image: state.form.code_image ? state.form.code_image.replace(import.meta.env.VITE_FILE_API, '') : '',
						front_image: state.form.front_image ? state.form.front_image.replace(import.meta.env.VITE_FILE_API, '') : '',
						back_image: state.form.back_image ? state.form.back_image.replace(import.meta.env.VITE_FILE_API, '') : '',
					};
					console.log('params: ', params);

					if (params.code_image && params.code_file) {
						await _supplierMchidUploadImg({
							supplier_id: state.form.supplier_id,
							credential_type: 'UNIFIED_CODE_CERTIFICATE',
							file: params.code_file,
							credential_url: params.code_image,
						});
					}
					if (params.front_image && params.front_file) {
						await _supplierMchidUploadImg({
							supplier_id: state.form.supplier_id,
							credential_type: 'FRONT_OF_ID_CARD',
							file: params.front_file,
							credential_url: params.front_image,
						});
					}
					if (params.back_image && params.back_file) {
						await _supplierMchidUploadImg({
							supplier_id: state.form.supplier_id,
							credential_type: 'BACK_OF_ID_CARD',
							file: params.back_file,
							credential_url: params.back_image,
						});
					}
					ElMessage.success('操作成功');
					onCancel();
					callback();
				}
			});
		};
		/********** 方法事件 **********/
		//打开
		const openDialog = async (config: any, fn: Function) => {
			console.log(config);
			state.open = true;
			reset();
			callback = fn;
			state.form.supplier_id = config.supplier_id;
			await _supplierMchidSeleteImg({
				supplier_id: config.supplier_id,
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};
		// 表单重置
		const reset = () => {
			state.form = {
				supplier_id: '',
				code_image: '',
				front_image: '',
				back_image: '',
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadCodeImgRef.value as any)?.reset();
				(imageUploadFrontImgRef.value as any)?.reset();
				(imageUploadBackImgRef.value as any)?.reset();
			});
		};
		/*****************************网络请求***************************/
		// 上传资质文件（单张上传）
		const _supplierMchidUploadImg = (params: any) => {
			supplierMchidUploadImg(params)
				.then((res: any) => {
					console.log(res);
					// ElMessage.success('操作成功');
					// onCancel();
					// callback();
				})
				.catch((err) => {
					state.submitLoading = false;
					console.log(err);
				});
		};
		// 查询供应商子商户图片
		const _supplierMchidSeleteImg = (params: any) => {
			supplierMchidSeleteImg(params)
				.then((res: any) => {
					console.log(res.data);
					res.data.list.map((item: any) => {
						if (item.credential_type == 'FRONT_OF_ID_CARD') {
							state.form.front_image = item.credential_url;
						}
						if (item.credential_type == 'UNIFIED_CODE_CERTIFICATE') {
							state.form.code_image = item.credential_url;
						}
						if (item.credential_type == 'BACK_OF_ID_CARD') {
							state.form.back_image = item.credential_url;
						}
					});

					console.log('state.form: ', state.form);
					nextTick(() => {
						(imageUploadCodeImgRef.value as any)?.dataLoading();
						(imageUploadFrontImgRef.value as any)?.dataLoading();
						(imageUploadBackImgRef.value as any)?.dataLoading();
					});
				})
				.catch((err) => {
					console.log(err);
				});
		};

		return {
			formRef,
			imageUploadCodeImgRef,
			imageUploadFrontImgRef,
			imageUploadBackImgRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>
